<template>

	<view class="content">
		<u-modal :show="showDel" title="温馨提示" :content='content' showCancelButton="true" @cancel="showDel=false"
			@confirm="handleDelUserConfirm"></u-modal>
		<view class="masker" v-if="showLoading">
			<u-loading-page :loading="true" loading-text="数据导入中..."></u-loading-page>
		</view>

		<u-modal :show="show" title="提示" content='此操作将取消要预约,是否继续？' @confirm="handleTip"></u-modal>
		<u-picker :show="showSelect" :columns="columns" keyName="typeName" @confirm="handleModalConfirm"
			@cancel="showSelect=false"></u-picker>
		<!-- 顶部搜索 -->
		<view class="search">
			<!-- 搜索框 -->
			<view class="search_con">
				<u-search v-if="searchActive==0" :showAction="true" placeholder="请输入姓名" v-model="baseForm.userName"
					@search="handleSearch(0)" @custom="handleSearch(0)" actionText="搜索" :animation="true"></u-search>
				<u-search v-if="searchActive==1" :showAction="true" placeholder="请输入工号/学号" v-model="baseForm.userId"
					@search="handleSearch(1)" @custom="handleSearch(1)" actionText="搜索" :animation="true"></u-search>
			</view>
			<!-- 所有按钮 -->
			<view class="all_btn">
				<!-- 切换搜索搜索模式 -->
				<view class="choose-btn"><u-button type="primary" size="mini" text="模式切换" icon="hourglass-half-fill"
						@click="handleOpenChoose"></u-button></view>
				<view class="choose-btn2" v-if="activeIndex>0">
					<u-button type="primary" size="mini" :text="btnText" icon="download"
						@click="handleImport"></u-button>
				</view>
				<view class="choose-btn2" v-if="activeIndex>0">
					<u-button type="primary" size="mini" :text="btnText1" icon="plus-circle"
						@click="handleAddUser(1)"></u-button>
				</view>
			</view>

			<!-- 切换组件 -->
			<view class="search_switch" v-if="searchActive==0">
				<view class="search_item" :class="{act_sItem:index==activeIndex,act_admin:roleId==0}"
					@click="handleStatus(index)" v-for="(item,index) in roleList" :key="index">{{item}}</view>
			</view>
		</view>
		<!-- 底部要预约列表 -->
		<view class="res_list">
			<u-empty v-if="bUsers.length==0" mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"
				text="暂无数据">
			</u-empty>
			<view class="list_item" v-for="(item,index) in bUsers" :key="item.userId">
				<!-- 左边头像 -->
				<!-- 中间信息 -->
				<view class="t_center">
					<view class="t_row">
						<!-- 姓名 -->
						<view class="t_name1">姓名：{{item.userName}}</text></view>
						<view class="t_name2 "><text v-if="item.roleId==2">学号</text>
							<text v-else>工号</text>

							：{{item.userId}}
						</view>
					</view>

					<view class="t_row">
						<view class="t_name">年龄：{{item.age}}</text></view>
						<view class="t_name sex">性别：{{item.gender}}
						</view>
					</view>
					<view class="t_row">
						<view class="t_name" v-if="item.roleId==0">身份：<view class="t_tag0">
								管理员
							</view>
						</view>
						<view class="t_name" v-if="item.roleId==1">身份：<view class="t_tag1">
								教师
							</view>
						</view>
						<view class="t_name" v-if="item.roleId==2">身份：<view class="t_tag2">
								学生
							</view>
						</view>
						<view class="t_name status">状态：<view class="tag0" v-if="!item.isRegister">未注册</view>
							<view v-if="item.isRegister" class="tag1">已注册</view>
						</view>
					</view>



				</view>
				<!-- 右边按钮 -->
				<view class="t_right">
					<view class="t_btn">
						<u-button type="primary" @click="handleEditUser(2,item)" size="mini" text="编辑"></u-button>
					</view>
					<view class="t_btn" v-if="!item.isRegister">
						<u-button type="error" @click="handleDelUser(item.userId)" size="mini" text="删除"></u-button>
					</view>




				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getUserRes,
		getUsers,
		getBaseUsers,
		deleteUser,
		addBaseUser
	} from '../../api/user.js'
	import {
		cancleRes
	} from '../../api/reservation.js'
	import {
		datesTime,
		countTime
	} from '../../utils/time.js'
	export default {
		data() {
			return {
				btnText1: "",
				showDel: false,
				content: "此操作将删除该条数据，是否继续？",
				showLoading: false,
				btnText: "",
				showSelect: false,
				columns: [
					['姓名搜索', "工号/学号搜索"]
				],
				activeIndex: 0,
				roleList: [
					"全部",
					"教师",
					"学生",
					"管理员"
				],
				resList: [],
				form: {},
				show: false,
				actResId: "",
				actStatus: "",
				users: [],
				roleId: "",
				searchActive: 0,
				activeRoleId: "",
				baseForm: {},
				bUsers: [],
				activeUserId: ""
			};
		},
		onLoad() {


			let user = uni.getStorageSync('user')
			this.roleId = user.roleId
			this.handleBaseUsers()

		},
		mounted() {
			let user = uni.getStorageSync('user')
			this.roleId = user.roleId

		},


		methods: {
			// 编辑用户
			handleEditUser(type, data) {
				let roleId = this.activeRoleId
				uni.navigateTo({
					url: `/subpages/admin_add_user/admin_add_user?roleId=${roleId}&type=${type}&user=${encodeURIComponent(JSON.stringify(data))}`
				})
			},
			// 单个添加用户
			handleAddUser(type) {
				let roleId = this.activeRoleId
				uni.navigateTo({
					url: `/subpages/admin_add_user/admin_add_user?roleId=${roleId}?type=${type}`
				})
			},
			// 删除用户确认事件
			handleDelUserConfirm() {
				deleteUser({
					userId: this.activeUserId
				}).then(res => {
					uni.$u.toast("删除成功！")
					// 重新请求数据
					this.handleBaseUsers()
				})
				this.showDel = false
			},
			// 根据id删除用户数据
			handleDelUser(userId) {
				this.activeUserId = userId
				this.showDel = true
			},
			// 获取基础用户数据
			handleBaseUsers() {
				getBaseUsers(this.baseForm).then(res => {
					// console.log(res.data);
					this.bUsers = res.data
					uni.stopPullDownRefresh()
				})
			},
			// 导入数据
			handleImport() {
				let that = this

				uni.chooseMessageFile({
					count: 1, //默认100
					success: async function(res) {
						that.showLoading = true
						// console.log(JSON.stringify(res.tempFilePaths));
						let url = res.tempFiles[0].path
						let result = await that.uploadFilePromise(url)
					}
				})
			},
			// 上传数据
			uploadFilePromise(url) {
				let that = this
				return new Promise((resolve, reject) => {
					let that1 = that

					let a = uni.uploadFile({
						url: 'http://127.0.0.1:7001/ExcelUpload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							roleId: that1.activeRoleId
						},
						success: (res) => {
							let that2 = that1
							setTimeout(() => {
								that2.showLoading = false
								resolve(res.data.data)
								// 重新加载数据
								this.handleBaseUsers()
								uni.$u.toast("数据导入成功！")
							}, 1000)
						}
					});
				})
			},
			// 模式切换按钮点击
			handleOpenChoose() {
				this.showSelect = true
			},
			// 模式选择
			handleModalConfirm(data) {
				let index = data.indexs[0]
				this.searchActive = index
				this.showSelect = false
				if (index == 0) {
					this.activeIndex = 0
					this.baseForm.userName = ""
					this.baseForm.searchRole = ""
					this.baseForm.userId = ""
					// 重新请求数据
					this.handleBaseUsers()
				} else if (index == 1) {
					this.bUsers = []
					this.baseForm.userName = ""
					this.baseForm.searchRole = ""
					this.baseForm.userId = ""
					this.activeIndex = 0

				}
			},
			// 获取用户列表
			handleGetUsers() {
				let user = uni.getStorageSync('user')
				let roleId = user.roleId
				this.form.roleId = roleId
				getUsers(this.form).then(res => {
					this.users = res.data
					uni.stopPullDownRefresh()

				})
			},
			handleTip() {
				let reservationId = this.actResId
				let status = this.actStatus
				this.show = false
				cancleRes({
					reservationId,
					status
				}).then(res => {
					uni.$u.toast('预约取消成功')
					// 重新请求数据
					this.handleGetUserResList()
				})
			},
			// 取消预约
			cancleRes(reservationId, status) {
				// console.log(reservationId, status);
				this.actResId = reservationId
				this.actStatus = status
				this.show = true

			},
			//详情
			toDetail(id) {
				uni.navigateTo({
					url: `/pages/res_detail/res_detail?reservationId=${id}`
				})

			},
			handleStatus(index) {
				this.activeIndex = index
				if (index == 0) {
					this.baseForm.searchRole = ""
					this.btnText = ""
				} else if (index == 1) {
					this.baseForm.searchRole = 1
					this.activeRoleId = 1
					this.btnText = "批量导入教师"
					this.btnText1 = "添加教师"
				} else if (index == 2) {
					this.baseForm.searchRole = 2
					this.activeRoleId = 2
					this.btnText = "批量导入学生"
					this.btnText1 = "添加学生"
				} else if (index == 3) {
					this.activeRoleId = 0
					this.btnText = "批量导入管理员"
					this.baseForm.searchRole = 0
					this.btnText1 = "添加管理员"
				}
				this.handleBaseUsers()
			},
			handleSearch(index) {
				// this.baseForm.searchRole = ""
				// this.btnText = ""
				// this.activeIndex = 0


				if (index == 0) {

				} else if (index == 1) {
					if (!this.baseForm.userId) {
						uni.$u.toast("请先输入用户的工号/学号")
						return
					}
				}
				this.handleBaseUsers()
			},

		},
		onShow() {
			this.handleBaseUsers()
		},
		onPullDownRefresh() {
			this.handleBaseUsers()
		},
	}
</script>

<style lang="scss">
	.content {
		position: relative;
		width: 100%;
		height: 100vh;

		.masker {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1000;

		}

		.search {
			width: 100%;
			min-height: 180upx;
			// background-color: pink;
			overflow: hidden;
			box-shadow: 0 3upx 30upx rgba(0, 0, 0, .15);

			.search_con {
				box-sizing: border-box;
				width: 100%;
				padding: 0 20upx;
				margin-top: 30upx;
			}

			.all_btn {
				width: 100%;
				height: 50upx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				margin-bottom: 30upx;

				.choose-btn {
					width: 160upx;
					height: 50upx;
					margin-top: 30upx;
					margin-left: 20upx;
				}

				.choose-btn2 {
					width: 200upx;
					height: 50upx;
					margin-top: 30upx;
					margin-left: 20upx;
				}

			}


			.search_switch {
				box-sizing: border-box;
				width: 100%;
				padding: 0 20upx;
				// margin-top: 30upx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;

				.search_item {
					width: 170upx;
					height: 50upx;
					// background-color: #fff;
					text-align: center;
					font-size: 30upx;
					line-height: 50upx;
					border-bottom: 10upx solid transparent;
					font-weight: 700;
				}

				.act_sItem {
					border-bottom: 2px solid #5064eb;
					color: #5064eb;
				}

				.act_admin {
					&:last-child {
						display: none;
					}
				}

			}
		}

		.res_list {
			box-sizing: border-box;
			width: 100%;
			height: 85vh;
			// background-color: pink;
			padding: 10upx 20upx;
			overflow-y: scroll;

			.list_item {
				box-sizing: border-box;
				padding: 20upx;
				position: relative;
				width: 100%;
				height: 200upx;
				background-color: #fff;
				border-radius: 20upx;
				margin-bottom: 20upx;
				box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.15);
				display: flex;
				flex-direction: row;
				justify-content: flex-start;

				.t_left {
					position: relative;
					width: 140upx;
					height: 100%;
					border-radius: 10upx;

					.left_img {
						width: 100%;
						height: 100%;
						border-radius: 10upx;
					}

					.icon_man {
						position: absolute;
						top: -10upx;
						right: -10upx;
						width: 35upx;
						height: 35upx;
						border-radius: 50%;
						background-color: #0084ff;
						z-index: 999;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

					}

					.icon_woman {
						position: absolute;
						top: -10upx;
						right: -10upx;
						width: 35upx;
						height: 35upx;
						border-radius: 50%;
						background-color: hotpink;
						z-index: 999;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

					}
				}

				.t_center {
					flex: 1;
					width: 100%;
					margin-left: 30upx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					flex-wrap: wrap;
					margin-right: 35upx;

					.t_row {
						width: 100%;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;

					}

					.t_name1 {
						width: 200upx;
						font-size: 28upx;
						font-weight: 700;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
					}

					.t_name2 {
						width: 190upx;
						font-size: 28upx;
						font-weight: 700;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						margin-left: 56upx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.status {
						margin-left: 73upx;
					}

					.u_id {
						margin-left: 114upx;
					}

					.sex {
						margin-left: 139upx;
					}

					.t_name {
						font-size: 28upx;
						font-weight: 700;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;

						.tag0 {
							width: 100upx;
							height: 40upx;
							// background-color: #5064eb;
							border: 1px solid #5064eb;
							font-size: 24upx;
							color: #5064eb;
							text-align: center;
							line-height: 40upx;
							border-radius: 5upx;
						}

						.tag1 {
							width: 100upx;
							height: 40upx;
							// background-color: #00b26a;
							border: 1px solid #00b26a;
							font-size: 24upx;
							color: #00b26a;
							text-align: center;
							line-height: 40upx;
							border-radius: 5upx;
						}


						.t_tag0 {
							width: 100upx;
							height: 40upx;
							background-color: #e73f32;
							font-size: 24upx;
							color: #fff;
							text-align: center;
							line-height: 40upx;
							border-radius: 5upx;


						}

						.t_tag1 {
							width: 100upx;
							height: 40upx;
							background-color: #fcc422;
							font-size: 24upx;
							color: #fff;
							text-align: center;
							line-height: 40upx;
							border-radius: 5upx;


						}

						.t_tag2 {
							width: 100upx;
							height: 40upx;
							background-color: #5ac725;
							font-size: 24upx;
							color: #fff;
							text-align: center;
							line-height: 40upx;
							border-radius: 5upx;


						}
					}
				}

				.t_right {
					width: 121upx;
					height: 100%;
					// background-color: pink;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.t_btn {
						width: 100%;
						height: 50upx;
					}
				}
			}

			.r_list_item {
				box-sizing: border-box;
				padding: 20upx;
				position: relative;
				width: 100%;
				height: 230upx;
				background-color: #fff;
				border-radius: 20upx;
				margin-bottom: 20upx;
				box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.15);

				.r_iconf {
					position: absolute;
					top: 10upx;
					right: 20upx;
					color: #ccc;
					font-size: 25upx;
				}

				.r_title {
					font-size: 30upx;
					font-weight: 700;
				}

				.r_time {
					font-size: 25upx;
					color: #ccc;
					margin-top: 20upx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;

				}

				.r_status {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					font-size: 25upx;
					color: #06c060;
					margin-top: 20upx;
				}

				.r_btn {
					width: 100%;
					height: 50upx;
					// background-color: pink;
					display: flex;
					flex-direction: row;
					justify-content: flex-end;

					.btn_item {
						width: 150upx;
						height: 100%;
						font-size: 25upx;
						text-align: center;

						&:first-child {
							margin-right: 8upx;
						}

					}
				}
			}
		}
	}
</style>